@font-face {
  font-family: 'Smiley';
  src: url('@/assets/fonts/SmileySans-Oblique-3.otf');
}

::-webkit-scrollbar {
  width: 0.42rem;
}

::-webkit-scrollbar-thumb {
  //滑动滑块条样式
  background: #9f9f9f;
  border-radius: 1.5rem;
  opacity: 1;

  &:hover {
    background: #d1d1d1;
  }
}

body {
  display: flex;
  flex-direction: column;
  // color: #86a5b1;
  background-color: #262626;
  font-size: 1rem;
  letter-spacing: 0.1rem;
}

* {
  padding: 0;
  margin: 0;
}

ul {
  list-style: none;
}

code {
  font-weight: 600;
  padding: 3px 5px;
  border-radius: 2px;
  background-color: #26282e;
  font-family:
    ui-monospace,
    SFMono-Regular,
    SF Mono,
    Menlo,
    Consolas,
    Liberation Mono,
    monospace;
  font-size: 85%;
}

a {
  color: #9feaf9;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  outline: none;
}

a:hover {
  border-bottom: 1px solid;
}

#app {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: hidden;

  font-family:
    Smiley,
    Roboto,
    -apple-system,
    BlinkMacSystemFont,
    'Helvetica Neue',
    'Segoe UI',
    'Oxygen',
    'Ubuntu',
    'Cantarell',
    'Open Sans',
    sans-serif;
}

.versions {
  margin: 0 auto;
  float: none;
  clear: both;
  overflow: hidden;
  font-family: 'Menlo', 'Lucida Console', monospace;
  color: #c2f5ff;
  line-height: 1;
  transition: all 0.3s;

  li {
    display: block;
    float: left;
    border-right: 1px solid rgba(194, 245, 255, 0.4);
    padding: 0 20px;
    font-size: 13px;
    opacity: 0.8;

    &:last-child {
      border: none;
    }
  }
}

::selection {
  background-color: rgb(129, 216, 208);
  color: #26282e;
  cursor: crosshair;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
